<template>
    <div class="alarm-manage-container">
        <el-card>
            <template #header>
                <div class="card-header">
                    <div>
                        <el-input v-model="searchKeyword" placeholder="告警编号 / 位置" size="small"
                            style="width: 200px; margin-right: 10px" @input="filterTable" />
                        <el-select v-model="filterType" placeholder="告警类型" size="small" clearable
                            style="width: 140px; margin-right: 10px" @change="filterTable">
                            <el-option v-for="item in typeOptions" :key="item" :label="item" :value="item" />
                        </el-select>
                        <el-select v-model="filterLevel" placeholder="告警等级" size="small" clearable
                            style="width: 140px; margin-right: 10px" @change="filterTable">
                            <el-option label="高" value="高" />
                            <el-option label="中" value="中" />
                            <el-option label="低" value="低" />
                        </el-select>
                        <el-select v-model="filterStatus" placeholder="处理状态" size="small" clearable
                            style="width: 140px; margin-right: 10px" @change="filterTable">
                            <el-option label="未处理" value="未处理" />
                            <el-option label="已处理" value="已处理" />
                        </el-select>
                        <el-date-picker v-model="filterTimeRange" type="datetimerange" start-placeholder="起始时间"
                            end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss"
                            style="width: 300px; margin-right: 10px" @change="filterTable" />
                        <el-button type="primary" icon="Download" @click="exportTable">导出</el-button>
                    </div>
                </div>
            </template>

            <el-table :data="filteredData" border stripe>
                <el-table-column prop="alarmId" label="告警编号" width="120" />
                <el-table-column prop="alarmType" label="告警类型" />
                <el-table-column prop="level" label="等级" width="80">
                    <template #default="scope">
                        <el-tag :type="getLevelTag(scope.row.level)">
                            {{ scope.row.level }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" width="100" />
                <el-table-column prop="time" label="时间" width="180" />
                <el-table-column prop="location" label="位置" />
                <el-table-column prop="handler" label="处理人" width="100" />
                <el-table-column prop="remark" label="处理备注" />
                <el-table-column label="操作" width="160">
                    <template #default="scope">
                        <el-button v-if="scope.row.status === '未处理'" size="small" type="primary"
                            @click="openDialog(scope.row)">
                            处理
                        </el-button>
                        <el-button v-else size="small" type="info" disabled>
                            已处理
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

        </el-card>

        <!-- 处理弹窗 -->
        <el-dialog v-model="dialogVisible" title="告警处理登记" width="500px">
            <el-form :model="form" label-width="100px">
                <el-form-item label="处理人">
                    <el-input v-model="form.handler" />
                </el-form-item>
                <el-form-item label="处理备注">
                    <el-input v-model="form.remark" type="textarea" :rows="3" />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="confirmHandle">确认处理</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface Alarm {
    alarmId: string
    alarmType: string
    level: string
    status: string
    time: string
    location: string
    handler: string
    remark: string
}

const typeOptions = ['温度超限', '湿度异常', '电压异常', '烟雾检测', '门禁异常']
const rawData = ref<Alarm[]>([
    { alarmId: 'A1000', alarmType: '温度超限', level: '高', status: '未处理', time: '2024-05-01 09:00:00', location: '北区冷藏区', handler: '', remark: '' },
    { alarmId: 'A1001', alarmType: '湿度异常', level: '中', status: '未处理', time: '2024-05-01 09:17:00', location: '南区常温区', handler: '', remark: '' },
    { alarmId: 'A1002', alarmType: '门禁异常', level: '低', status: '未处理', time: '2024-05-01 09:34:00', location: '一号仓库', handler: '', remark: '' },
    { alarmId: 'A1003', alarmType: '烟雾检测', level: '高', status: '未处理', time: '2024-05-01 09:51:00', location: '北区冷藏区', handler: '', remark: '' },
    { alarmId: 'A1004', alarmType: '电压异常', level: '中', status: '已处理', time: '2024-05-01 10:08:00', location: '二号仓库', handler: '张三', remark: '已复查' },
    { alarmId: 'A1005', alarmType: '门禁异常', level: '低', status: '未处理', time: '2024-05-01 10:25:00', location: '南区常温区', handler: '', remark: '' },
    { alarmId: 'A1006', alarmType: '温度超限', level: '高', status: '未处理', time: '2024-05-01 10:42:00', location: '北区冷藏区', handler: '', remark: '' },
    { alarmId: 'A1007', alarmType: '湿度异常', level: '中', status: '已处理', time: '2024-05-01 10:59:00', location: '北区冷藏区', handler: '李四', remark: '误报' },
    { alarmId: 'A1008', alarmType: '烟雾检测', level: '高', status: '未处理', time: '2024-05-01 11:16:00', location: '危险品专仓', handler: '', remark: '' },
    { alarmId: 'A1009', alarmType: '温度超限', level: '中', status: '未处理', time: '2024-05-01 11:33:00', location: '北区冷藏区', handler: '', remark: '' },
    { alarmId: 'A1010', alarmType: '电压异常', level: '中', status: '未处理', time: '2024-05-01 11:50:00', location: '南区常温区', handler: '', remark: '' },
    { alarmId: 'A1011', alarmType: '烟雾检测', level: '高', status: '未处理', time: '2024-05-01 12:07:00', location: '北区冷藏区', handler: '', remark: '' },
    { alarmId: 'A1012', alarmType: '门禁异常', level: '低', status: '未处理', time: '2024-05-01 12:24:00', location: '二号仓库', handler: '', remark: '' },
    { alarmId: 'A1013', alarmType: '电压异常', level: '高', status: '未处理', time: '2024-05-01 12:41:00', location: '北区冷藏区', handler: '', remark: '' },
    { alarmId: 'A1014', alarmType: '湿度异常', level: '中', status: '已处理', time: '2024-05-01 12:58:00', location: '北区冷藏区', handler: '王五', remark: '传感器故障' }
])

const searchKeyword = ref('')
const filterType = ref('')
const filterLevel = ref('')
const filterStatus = ref('')
const filterTimeRange = ref<[Date, Date] | undefined>()


const filteredData = ref<Alarm[]>([])

const dialogVisible = ref(false)
const form = ref({ handler: '', remark: '' })
const currentAlarmId = ref('')

function getLevelTag(level: string): 'success' | 'warning' | 'danger' | 'info' {
  switch (level) {
    case '高': return 'danger'
    case '中': return 'warning'
    case '低': return 'success'
    default: return 'info'
  }
}


function filterTable() {
    filteredData.value = rawData.value.filter(item => {
        const kw = searchKeyword.value.trim().toLowerCase()
        const matchKeyword = item.alarmId.toLowerCase().includes(kw) || item.location.toLowerCase().includes(kw)
        const matchType = filterType.value ? item.alarmType === filterType.value : true
        const matchLevel = filterLevel.value ? item.level === filterLevel.value : true
        const matchStatus = filterStatus.value ? item.status === filterStatus.value : true
        const matchTime = filterTimeRange.value
            ? (new Date(item.time) >= filterTimeRange.value[0] && new Date(item.time) <= filterTimeRange.value[1])
            : true
        return matchKeyword && matchType && matchLevel && matchStatus && matchTime
    })
}


function openDialog(row: Alarm) {
    currentAlarmId.value = row.alarmId
    form.value = { handler: '', remark: '' }
    dialogVisible.value = true
}

function confirmHandle() {
    const index = rawData.value.findIndex(item => item.alarmId === currentAlarmId.value)
    if (index !== -1) {
        rawData.value[index].status = '已处理'
        rawData.value[index].handler = form.value.handler
        rawData.value[index].remark = form.value.remark
    }
    dialogVisible.value = false
    filterTable()
}

function exportTable() {
    const headers = ['告警编号', '告警类型', '等级', '状态', '时间', '位置', '处理人', '处理备注']
    const keys = ['alarmId', 'alarmType', 'level', 'status', 'time', 'location', 'handler', 'remark']
    const csv = [
        headers.join(','),
        ...filteredData.value.map(row => keys.map(k => row[k as keyof Alarm]).join(','))
    ].join('\n')

    const blob = new Blob([csv.replace(/\\\\n/g, '\\n')], { type: 'text/csv;charset=utf-8;' })
    const link = document.createElement('a')
    link.href = URL.createObjectURL(blob)
    link.download = '告警记录.csv'
    link.click()
}

filterTable()
</script>
<style scoped>
.alarm-manage-container {
    padding: 20px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.card-header>div {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.pagination-bar {
    margin-top: 20px;
    text-align: right;
}
</style>